import React, { useState, useContext } from "react";
import { View, Image, CoverView, CoverImage } from "@tarojs/components";
import Taro from "@tarojs/taro";
import { CommonContext } from "./../store";
import { tabList } from "./helper";
import "./index.less";
import CenterModel from "../components/center-modal";

export default () => {
  const [state] = useContext(CommonContext);
  const [CMStatus, setCMStatus] = useState(false);

  const tabClick = (value) => {
    if (value.router === "/pages/add/index") {
      // setCMStatus(true);
      Taro.navigateTo({ url: value.router });
    } else {
      Taro.switchTab({
        url: value.router,
      });
    }
  };
  return (
    <View className="tabs">
      {tabList.map((item) => {
        const isAcive = state.tabBar === item.title;
        const currentImg = isAcive ? item.selectedImage : item.image;
        const currentTheme = isAcive ? "#4C78FF" : "#c3cce7";
        const isAddImg = item.router === "/pages/add/index";
        return (
          <CoverView
            className={isAddImg ? "tab tabAdd" : "tab"}
            key={item.router}
            onClick={() => {
              tabClick(item);
            }}
          >
            <CoverImage
              src={currentImg}
              className={isAddImg ? "tabAdd-img" : "img"}
              key={item.title}
            />
            <CoverView className="title" style={{ color: currentTheme }}>
              {item.title}
            </CoverView>
          </CoverView>
        );
      })}
      {CMStatus && <CenterModel setCMStatus={setCMStatus} />}
    </View>
  );
};
